﻿@model IEnumerable<Lumos.Models.GroupsDbModel>

@{
    ViewBag.Title = "Groups";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@Scripts.Render("~/bundles/masonry")
<div class="Breadcrumbs-Nav">
    <i class="fa fa-map-marker"></i>
    <a href="@Href("/AppAdmin/")">App Admin</a>
    <a href="@Href("/AppAdmin/Groups")">Groups</a>
    List
</div>

<h2>Groups</h2>

<p>
    <a href="@Href("~/AppAdmin/Groups/Create/")" class="LinkAsButton-Plain"><i class="fa fa-plus"></i> New Group</a>
</p>

<div id="Masonry-Container">
    @foreach (var item in Model)
    {
        <div class="item">
            <h2>@Html.DisplayFor(modelItem => item.Name)</h2>
            <p>@Html.DisplayFor(modelItem => item.Location)</p>
            <hr />
            <p>No Group Admins</p>
            <p><i class="fa fa-users"></i> 38 group members</p>

            <p><a href="#" class="btn btn-default btn-sm"><i class="fa fa-user"></i> Assign Group admin</a></p>

            <a class="btn btn-default btn-sm" href="@Href("~/AppAdmin/Groups/Edit/"+item.Id)">
                <i class="fa fa-cog"></i> Edit
            </a>

            <a class="btn btn-danger btn-sm" href="@Href("~/AppAdmin/Groups/Edit/"+item.Id)">
                <i class="fa fa-trash-o fa-lg"></i> Delete
            </a>

            @Html.ActionLink("Details", "Details", new { id = item.Id })
        </div>
    }
</div>

<script>
    var container = document.querySelector('#Masonry-Container');
    var masonry = new Masonry(container, {
        columnWidth: 300,
        itemSelector: '.item'
    });
</script>


